<template>
  <div class="help">
    <header>开始使用</header>
    <h1>1.模块说明</h1>
    <h2>1.1初始化界面</h2>
    <div>
      本模拟平台初始界面包括软件功能和用途介绍，阐述了该平台能够解决的实际问题和能够实现的功能。
    </div>
    <h2>1.2传输文件与选取模块</h2>
    <div>
      如何上传文件: 切换至文件传输界面，点击上传文件图标或者拖动文件到图标即可。
    </div>
    <h3>1.2.1上传文件说明</h3>
    <div>
      上传文件应为EXCEL文件格式。具体格式分为4列，标题依次为ID（用户编号），day（电压采集日期），time（电压采集时间），voltage（电压数据），示例如下图所示（数据顺序无要求）。上传文件图标下方为进度条，能够显示文件数据处理进度。
    </div>
    <img src="../../assets/imgs/des.png" alt="" @click="showImagePreview" />

    <h3>1.2.2文件选取模块说明</h3>
    <div>
      文件传输界面右侧为文件选取模块，能够显示已上传并处理的文件数据，包括电压采集地，台区用户数目，电压时间序列，时间跨度等信息。
    </div>
    <h2>1.3异常用户诊断模块说明</h2>
    <div>
      左侧界面能够展示所有用户的电压时间序列，鼠标放在任意曲线上，能够显示该曲线的户号编号和异常状况。右侧界面分为上下模块，上半模块用柱状图方式展示异常用户判断指标--局部离群因子LOF值，若LOF值大于1.1，将此用户判断为异常用户，并将异常用户将用不同颜色标出，当鼠标经过某一柱形将显示该LOF值对应的户号编号。右下板块能够显示异常用户的电压曲线，当鼠标放在某一曲线上将显示该曲线对应的户号编号。
    </div>
    <h2>1.4用户相位识别界面说明</h2>
    <h3>1.4.1左侧图像说明</h3>
    <div>
      用户相位识别界面分为左右两部分。左上部分为聚类中心决策图，能够将将原始电压数据集映射到二维空间，横坐标为电压曲线的相对密度，纵坐标为电压曲线间的相对距离，根据衡量电压曲线间的相似程度确定聚类中心，即选择ρ和δ都较大的三个电压数据点作为聚类中心，作标红处理。鼠标经过任意一个点时，能够显示该ρ和δ值对应的用户户号。
      左下部分综合考虑 ρ 和δ的聚类中心指标 γ，聚类中心的
      γ将跳变，因此将各电压曲线的聚类中心指标γ降序排列并取γ值最大的三个点选取为聚类中心，可以辅助检验聚类中心的选取合理性，即验证A，B，C三相聚类的合理性。
    </div>
    <h3>1.4.2搜索查找功能说明</h3>
    <div>
      右侧下方提供搜索查找功能，能够输入户号并查询结果，方便使用者快速了解指定户号信息。未查询时该部分只显示搜索框，输入户号查询后在搜索框下方显示搜索结果，包括该户号的电压曲线，该户号异常状况，该户号的相位辨识结果。
    </div>
    <h2>1.5综合结果界面说明</h2>
    <h3>1.5.1树状图板块说明</h3>
    <div>
      采用可视化模型方式（树状图），直观的展现选取的三个文件的所有用户异常情况及辨识相位结果。每个文件树状图分为A相，B相，C相，异常板块，下面显示对应的户号。
    </div>
    <h3>1.5.2环比图说明</h3>
    <div>
      包括异常用户环比图和用户相位环比图，能够直观展示台区异常用户情况和三相分布情况，为使用者分析该台区异常用户情况提供直观图示。右上部分的异常用户环比图包括异常用户和非异常用户，在右侧显示百分比。右下部份的用户相位环比图包括A相，B相，C相在所有非异常用户中的占比，右侧显示百分比。
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 点击图片放大
const showImagePreview = () => {
  const image = new Image();
  image.src = require('../../assets/imgs/des.png');
  image.onload = () => {
    // 创建弹出层
    const previewContainer = document.createElement("div");
    previewContainer.style.position = "fixed";
    previewContainer.style.top = 0;
    previewContainer.style.bottom = 0;
    previewContainer.style.left = 0;
    previewContainer.style.right = 0;
    previewContainer.style.backgroundColor = "rgba(0,0,0,0.8)";
    previewContainer.style.display = "flex";
    previewContainer.style.justifyContent = "center";
    previewContainer.style.alignItems = "center";
    document.body.appendChild(previewContainer);
    // 在弹出层中添加图片
    const previewImage = document.createElement("img");
    previewImage.src = require('../../assets/imgs/des.png');
    previewImage.style.maxWidth = "80%";
    previewImage.style.maxHeight = "80%";
    previewContainer.appendChild(previewImage);
    // 点击弹出层，关闭预览
    previewContainer.addEventListener("click", () => {
      document.body.removeChild(previewContainer);
    });
  };
};
</script>

<style lang="scss" scoped>
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.2);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块
     内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #b3b3b3;
}
.help {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 30px;
  box-sizing: border-box;
  header {
    text-align: center;
    font-size: 50px;
    font-weight: bold;
  }
  h2 {
    margin: 16px 0 16px 30px;
  }
  h3 {
    margin: 16px 0 16px 60px;
  }
  div {
    margin-left: 90px;
  }
  img {
    width: 282px;
    height: 365px;
    margin: 16px 0 16px 90px;
  }
}
</style>
